{% extends "base.html" %}
{% load commonfilter %}

{% block content %}
<div class="wrap">
	<div class="wrap_left">
        <div style="width:100%;height:80px;margin-top:20px">
            <div style="float:left;padding-left:80px">
                <div class="usage">
                    <span class="utitle">可用率</span>
                    <span class="ubar">
                        	<span class="uinbar {{ avail|showcolor:90 }}" style="width:{{avail}}%"></span>
                    </span>
                    <span class="unum">{{avail}}%</span>
                </div>
                </br></br>
                <div class="usage">
                    <span class="utitle">利用率</span>
                    <span class="ubar">
                        	<span class="uinbar goodtag" style="width:{{usage}}%"></span>
                    </span>
                    <span class="unum">{{usage}}%</span>
                </div>
            </div>
    	    <div style="float:right;padding-top:20px">
            <img src="/static/img/title.jpg" width=60% alt="" style="float:right;padding-right:30px"/>
            </div>
        </div>
        <div class="left_pic"><img width=100% src="/static/img/flow.png" /></div> 
    </div>
    <div class="wrap_right">
        <div class="login">
        <form action="/login/" method="post">
            <div><label for="" class="textalingR">用户名:</label><input type="text" name="user"/></div>
            <div><label for="" class="textalingR">用户名:</label><input type="text" name="password"/></div>
            <div><input type="submit" value="马上登录" class="loginbutton"/></div>
        </form>
        </div>
    	<div class="shenqing1" style="padding-top:30px">
        <h5 style="float:left;width:88%;">主机概要</h5>
        </div>
        <div class="shenqing10">
            <table width="95%" border="1" cellspacing="0" cellpadding="0" bordercolor="#8CBDE3" style="border-collapse:collapse;">
          <tr>
            <td width="52" class="textalingR">机房</td>
            <td width="91" style="color:#2E74D1;">{{request.session.all.icount}}</td>
            </tr>
          <tr>
            <td class="textalingR">主机</td>
            <td style="color:#2E74D1;">{{request.session.all.hcount}}</td>
            </tr>
          <tr>
            <td class="textalingR">正常</td>
            <td style="color:#2E74D1;">{{request.session.all.thcount}}</td>
          </tr>
          <tr>
            <td class="textalingR">异常</td>
            <td style="color:#2E74D1;">{{request.session.all.fhcount}}</td>
          </tr>
          <tr>
            <td class="textalingR">可用率</td>
            <td style="color:#2E74D1;">100%</td>
          </tr>
            <tr>
            <td class="textalingR">平均负载</td>
            <td style="color:#2E74D1;">0.4</td>
          </tr>

        </table>
      </div>
      <div class="shenqing1">
        <h5 style="float:left;width:88%;">监控概要</h5>
      </div>
        <div class="shenqing10">
            <table width="95%"   border="1" cellspacing="0" cellpadding="0" bordercolor="#8CBDE3" style="border-collapse:collapse;">
          <tr>
            <td width="52" class="textalingR">监控</td>
            <td width="91" style="color:#2E74D1;">{{request.session.all.mcount}}</td>
            </tr>
          <tr>
            <td class="textalingR">正常</td>
            <td style="color:#2E74D1;">{{request.session.all.tmcount}}</td>
            </tr>
          <tr>
            <td class="textalingR">异常</td>
            <td style="color:#2E74D1;">{{request.session.all.fhcount}}</td>
          </tr>
          <tr>
            <td class="textalingR">报警</td>
            <td style="color:#2E74D1;">1</td>
          </tr>
        </table>
      </div>
    </div>
</div>
{% endblock %}
